<template>
  <div class="myaside" :style="{ width: isCollapse ? '64px' : '180px' }">
    <div class="myaside-title">
      {{ isCollapse ? "十三余" : "十三余后台管理系统" }}
    </div>
    <el-menu
      :default-active="defaultActive"
      class="myaside-mymenu"
      :default-openeds="unfold"
      background-color="#0086F1"
      text-color="#fff"
      active-text-color="#ffd04b"
      :collapse="isCollapse"
      :style="{ height: browserHeight - 60 + 'px' }"
    >
      <template v-for="(item, index) in list">
        <el-menu-item v-if="item.unique.substring(0,6) == 'SSYONE'" :index="item.unique" :key="index" @click="onRouter(item.list[0])">
          <i class="el-icon-aim" style="color:#ffffff"></i>
          <span slot="title">{{ item.name }}</span>
        </el-menu-item>
        <el-submenu
          :key="item.unique"
          :index="item.unique"
          v-else
        >
          <template slot="title">
            <i class="el-icon-aim" style="color:#ffffff"></i>
            <span>{{ item.name }}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item
              v-for="(child, idx) in item.list"
              :key="idx"
              :index="child.unique"
              @click="onRouter(child)"
              >{{ child.name }}</el-menu-item
            >
          </el-menu-item-group>
        </el-submenu>
        
      </template>
    </el-menu>
  </div>
</template>

<script>
import { getStore } from "@/utils/localStorage.js";
export default {
  props: ["browserHeight"],
  data() {
    return {
      isCollapse: false,
      unfold: [],
      defaultActive: "",
      list:[]
    };
  },
  mounted() {
    let list = this.list;
    this.isCollapse = this.$store.state.isCollapse;
    this.list = getStore("userinfo").roletop
  },
  methods: {
    // 路由跳转
    onRouter(e){
      let qxobj = {}
      e.qx.forEach(element=>{
        qxobj[element.rolekey]=1
      })
      qxobj = JSON.stringify(qxobj)
      this.$router.push({name:e.unique,query:{qxobj}})
    },
    // 默认展开
    onUnfold() {
      let arr = [];
      this.list.forEach((item) => {
        arr.push(item.to);
      });
      this.unfold = arr;
    },
  },
  updated() {
    console.log("this.$route", this.$route);
    this.defaultActive = this.$route.name;
  },
  watch: {
    "$route.name"(val){
      this.defaultActive = val;
    },
    "$store.state.isCollapse": function (val) {
      console.log("val", val);
      this.isCollapse = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.iconColor {
  font-size: 20px;
  margin-right: 20px;
}
.el-menu {
  border: 0;
}
.myaside {
  background: #0086F1;
  overflow: hidden;
  &-title {
    height: 60px;
    text-align: center;
    line-height: 60px;
    color: $global-text-color;
  }
  // &-mymenu {
  //   height: calc(100vh - 60px);
  // }
}
</style>
